<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/dropdown/suggestion.js" />
<div id="suggestion">
	<div title="Demo">
		<form class="init ccay-form" >
  		<div class="ccay-form-custom ccay-form-custommore">
		 <ul>
			 <li class="ccay-form-row">
			 	<samp>基本联想</samp>
			 	<span class='ccay-form-input'>
			 		<input id='sgt1' filed="" type="text" />
		            <input type="button" value="get value" onclick="alert($('#sgt1').ccayGetValue());" />
		            <input type="button" value="get text" onclick="alert($('#sgt1').val());" />
		            <input type="button" value="set value" onclick="$('#sgt1').ccaySetValue('haha');" />
			 	</span>
			 </li>
			 <li class="ccay-form-row">
			 	<samp>自定义下拉项联想</samp>
			 	<span class='ccay-form-input'>
			 		<input id='sgt2' filed="" type="text" value='System Admin' />
		            <input type="button" value="get value" onclick="alert($('#sgt2').ccayGetValue());" />
			 	</span>
			 </li>
			 <li class="ccay-form-row">
			 	<samp>下拉区多列设置</samp>
			 	<span class='ccay-form-input'>
			 		<input id='sgt3' filed="" type="text" />
		            <input type="button" value="get value" onclick="alert($('#sgt3').ccayGetValue());" />
			 	</span>
			 </li>
			  <li class="ccay-form-row">
			 	<samp>多项联想(input)</samp>
			 	<span class='ccay-form-input'>
			 		<input id='sgt_multi' style='width:300px' type="text" />
			 		<input type="button" value="get value" onclick="alert($('#sgt_multi').ccayGetValue());" />
			 		<input type="button" value="get text" onclick="alert($('#sgt_multi').val());" />
			 		<!-- <input type="button" value="set value" onclick="$('#sgt_multi').ccaySetValue('21323');" /> -->
			 		<input type="button" value="valid" onclick="alert($('#sgt_multi').manager().valid());" />
			 		
			 	</span>
			 </li>
			   <li class="ccay-form-row">
			 	<samp>多项联想(textarea)</samp>
			 	<span class='ccay-form-input'>
			 		<textarea id='sgt_area' rows="5" style='width:300px'></textarea>
			 	</span>
			 </li>
		</ul>
		</div>
		</form>

<script type="text/javascript">
$(function(){
	$('#sgt1').suggestion({
		//item: "<li class='{0}' val='${roleName}'><span><font class='list-text'>${roleId}:${roleName}</font> - ${roleDesc}</span></li>",
		//defaultFilter:'%',
		displayField:"roleName",
		valueField:"roleId",
		//suggestNum:20,
		ajax:{ 
	   	 	url:"services/ccay/security/role/list/page/status/${suggestNum}/1?roleName={0}"
	    }});
	
	$('#sgt2').suggestion({
		item: "<li class='{0}' val='${roleName}'><span><font class='list-text'>${roleId}:${roleName}</font> - ${roleDesc}</span></li>",
		defaultFilter:'%',
		suggestNum:20,
		ajax:{
	   	 	url:"services/ccay/security/role/list/page/status/${suggestNum}/1?roleName={0}"
	    }});
	
	$('#sgt3').ccaySuggest({
		url: "services/ccay/security/role/list/page/status/80/1",
		fieldMapper: {
			roleName: $i18n("ccay.common.label.name"),
			roleDesc: $i18n("ccay.common.label.desc")
		},
		displayField:"roleName",
		valueField:"roleId"
	});

	$('#sgt_multi').suggestion({
		displayField:"roleName",
		valueField:"roleId",
		multi:true,
		item: "<li  class='{0} ${&data._history}' val='${roleId}'><span><font class='list-text'>${roleName}</font> - ${roleDesc}</span></li>",
	   	 ajax:{
	   	 	url:"services/ccay/security/role/list/page/status/80/1"
	    }});
	
	$('#sgt_area').suggestion({
		displayField:"roleName",
		valueField:"roleId",
		multi:true,
		item: "<li  class='{0} ${&data._history}' val='${roleId}'><span><font class='list-text'>${roleName}</font> - ${roleDesc}</span></li>",
	   	 ajax:{
	   	 	url:"services/ccay/security/role/list/page/status/80/1?roleName={0}"
	    }});
})
</script>
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html'>
&lt;form class="init ccay-form" >
&lt;div class="ccay-form-custom ccay-form-custommore">
&lt;ul>
	&lt;li class="ccay-form-row">
		&lt;samp>基本联想&lt;/samp>
		&lt;span class='ccay-form-input'>
			&lt;input id='sgta' filed="" type="text" />
			&lt;input type="button" value="get value" onclick="alert($('#sgta').ccayGetValue());" />
			&lt;input type="button" value="set value" onclick="$('#sgta').ccaySetValue('haha');" />
		&lt;/span>
	&lt;/li>
	&lt;li class="ccay-form-row">
	 	&lt;samp>自定义下拉项联想&lt;/samp>
	 	&lt;span class='ccay-form-input'>
	 		&lt;input id='sgtb' filed="" type="text" value='System Admin' />
	        &lt;input type="button" value="get value" onclick="alert($('#sgtb').ccayGetValue());" />
	        &lt;input type="button" value="set value" onclick="$('#sgtb').ccaySetValue('haha');" />
	 	&lt;/span>
 	&lt;/li>
 	&lt;li class="ccay-form-row">
		 	&lt;samp>下拉区多列设置&lt;/samp>
		 	&lt;span class='ccay-form-input'>
		 		&lt;input id='sgtc' filed="" type="text" />
	            &lt;input type="button" value="get value" onclick="alert($('#sgtc').ccayGetValue());" />
		 	&lt;/span>
	&lt;/li>
  	&lt;li class="ccay-form-row">
	 	&lt;samp>多项联想(input)&lt;/samp>
	 	&lt;span class='ccay-form-input'>
	 		&lt;input id='sgt_multi1' style='width:300px' type="text" />
	 		&lt;input type="button" value="get value" onclick="alert($('#sgt_multi1').ccayGetValue());" />
	 		&lt;input type="button" value="get text" onclick="alert($('#sgt_multi1').val());" />
	 		&lt;!-- &lt;input type="button" value="set value" onclick="$('#sgt_multi1').ccaySetValue('21323');" /> -->
	 		&lt;input type="button" value="valid" onclick="alert($('#sgt_multi1').manager().valid());" />
	 		
	 	&lt;/span>
 	&lt;/li>
   &lt;li class="ccay-form-row">
 	&lt;samp>多项联想(textarea)&lt;/samp>
 	&lt;span class='ccay-form-input'>
 		&lt;textarea id='sgt_area1' rows="5" style='width:300px'>&lt;/textarea>
 	&lt;/span>
 &lt;/li>
&lt;/ul>
&lt;/div>
&lt;/form>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js'>
// <font color="red">基本联想</font>
$('#sgta').suggestion({
	displayField:"roleName",
	valueField:"roleId",
	ajax:{
	  	 	url:"services/ccay/security/role/list/page/status/${suggestNum}/1?roleName={0}"
	}
});
// <font color="red">自定义下拉项联想</font>
$('#sgtb').suggestion({
	item: "&lt;li class='{0}' val='${roleName}'>&lt;span>&lt;font class='list-text'>${roleId}:${roleName}&lt;/font> - ${roleDesc}&lt;/span>&lt;/li>",
	defaultFilter:'%',
	suggestNum:20,
	ajax:{
   	 	url:"services/ccay/security/role/list/page/status/${suggestNum}/1?roleName={0}"
    }
});
// <font color="red">下拉区多列设置</font>
$('#sgtc').ccaySuggest({
	url: "services/ccay/security/role/list/page/status/80/1",
	fieldMapper: {
		roleName: $i18n("ccay.common.label.name"),
		roleDesc: $i18n("ccay.common.label.desc")
	},
	displayField:"roleName",
	valueField:"roleId"
});
// <font color="red">多项联想(input)</font>
$('#sgt_multi1').suggestion({
	multi:true,
	displayField:'roleName',
	item: "&lt;li class='{0}' val='${roleId}'>&lt;span>&lt;font class='list-text'>${roleName}&lt;/font> - ${roleDesc}&lt;/span>&lt;/li>",
   	 ajax:{
   	 	url:"services/ccay/security/role/list/page/status/80/1"
    }
});
// <font color="red">多项联想（textarea）</font>
$('#sgt_area1').suggestion({
	multi:true,
	item: "&lt;li class='{0}' val='${roleId}'>&lt;span>&lt;font class='list-text'>${roleName}&lt;/font> - ${roleDesc}&lt;/span>&lt;/li>",
   	 ajax:{
   	 	url:"services/ccay/security/role/list/page/status/80/1?roleName={0}"
    }
});
	</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#suggestion',$('#js').html(),$('#html').html())">试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
</div>
